<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            display: block;
            /* position: relative; */
            margin: 0 500px;
            text-decoration: none;

        }

        #box {
            width: 200px;
            height: 100px;
            background-color: crimson;
            display: none;
            position: absolute;
        }
    </style>
</head>

<body>
    <!-- - 1，鼠标跟随提示 -->

    <a href="#">娇娇</a>
    <a href="#">娜娜</a>
    <div id="box"></div>
    <script>
        window.onload = function () {
            var aDom = document.getElementsByTagName("a");
            var boxDom = document.getElementById("box");
            var arr = ["喜欢帅哥", "调皮可爱"];
            for (var i = 0; i < aDom.length; i++) {
                aDom[i].index = i;
                aDom[i].onmouseover = function () {
                    boxDom.style.display = "block"
                    boxDom.innerHTML = arr[this.index]
                };
                aDom[i].onmouseout = function () {
                    boxDom.style.display = "none"
                };
                aDom[i].onmousemove = function (event) {
                    var e = event || window.event;
                    boxDom.style.left = e.clientX + 8 + "px";
                    boxDom.style.top = e.client + 8 + "px"
                }
            }
        }
    </script>
</body>

</html>